<template>
    <div class="home" style="margin-left: 50px">
        <div>
            <el-avatar style="margin-left: 75%" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <el-dropdown split-button type="primary" @command="user" style="margin-left: 1%">
                选择用户
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">卖家</el-dropdown-item>
                    <el-dropdown-item command="0">买家</el-dropdown-item>
                    <el-dropdown-item command="3">管理员</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!--            <el-button type="primary" plain @click="user" style="margin-left: 250px">选择用户</el-button>-->
        </div>
        <div>
            <template>
                <!--动态将图片轮播图的容器高度设置成与图片一致-->
                <el-carousel :interval="4000" type="card" height="300px">
                    <el-carousel-item v-for="item in imageBox" :key="item.id">
                        <img :src= "item.idView" class="image"/>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <br/>
        <el-button type="primary" plain @click="item" style="margin-left: 30%">商品页</el-button>
        <el-button type="primary" plain @click="order" style="margin-left: 20%">查看订单</el-button>
    </div>
</template>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #ffffff;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #ffffff;
}
img{
    /*设置图片宽度和浏览器宽度一致*/
    width:100%;
    height:100%;
}

.el-dropdown {
    vertical-align: top;
}
.el-dropdown + .el-dropdown {
    margin-left: 15px;
}
.el-icon-arrow-down {
    font-size: 12px;
}
</style>

<script>
import app from "@/App.vue";
import globalFunction from "@/App.vue";

export default {
    computed: {
        app() {
            return app
        }
    },
    data(){
        return{
            drawer: false,
            direction: 'btt',
            imageBox:[
                {id:0,idView:('https://img.zcool.cn/community/019513603a61c411013ef90f39ffb9.jpg')},
                {id:1,idView:('https://img95.699pic.com/desgin_photo/40187/2720_list.jpg')},
                {id:2,idView:('https://th.bing.com/th/id/R.22891ad9690d5b3a59230d6315514a65?rik=P7W%2fW5dk%2f5O7XA&riu')},
                {id:3,idView:('https://img.zcool.cn/community/012db9603a61c711013ef90fd38354.jpg')},
                {id:4,idView:('https://1.s91i.faiusr.com/4/AFsI48sjEAQYACD58dbhBSjwo8z2BjDABzicBA!800x800.png')},
                {id:5,idView:('https://img.zcool.cn/community/01f5c8603a61c311013f37457b7d72.jpg')},
            ],
            // 浏览器宽度
            screenWidth :0
        }
    },
    methods:{
        user(command){
            globalFunction.UserType = command;
            console.log(globalFunction.UserType, parseInt(command))
        },
        item(){
            this.$router.push(`/${app.data().type[globalFunction.UserType].name}`)
        },
        order(){
            this.$router.push('/order')
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //下面是自适应框体大小的设置
        setSize:function () {
            // 通过浏览器宽度(图片宽度)实现计算高度
            this.bannerHeight = 400 / 1920 * this.screenWidth;
        },
        mounted() {
            // 首次加载时,需要调用一次
            this.screenWidth =  window.innerWidth;
            this.setSize();
            // 窗口大小发生改变时,调用一次
            window.onresize = () =>{
                this.screenWidth =  window.innerWidth;
                this.setSize();
            }
        },
    },

}
</script>

<style scoped>

</style>